<template>
  <div class="bookDetail">
    <div class="top"
         style="background:#B83320;height:46px;">
      <span class="iconfont icon-youfangxiangjian"></span>
      <span @click="$router.push({name:'Home'})">返回</span>
      <span>书籍详情</span>
      <span class="iconfont icon-shuji"></span>
      <span class="iconfont icon-zhuyedefuben"></span>
    </div>
    <bookContentDetail :bookInfo="bookInfo"
                       :bookChapter="bookChapter"></bookContentDetail>
    <bookIntroduce :bookInfo="bookInfo"
                   :bookChapter="bookChapter"></bookIntroduce>
  </div>
</template>

<script>
import bookContentDetail from './children/bookContentDetail'
import bookIntroduce from './children/bookIntroduce'

export default {
  name: 'bookDetail',
  props: {},
  data () {
    return {
      bookInfo: this.$route.query,
      bookChapter: [1, 2, 3],
    };
  },

  components: {
    bookContentDetail,
    bookIntroduce
  },
  created () {
    this.getBookDetail();
    console.log(4654654)


  },


  computed: {},

  beforeMount () { },

  mounted () {
    console.log(this.bookChapter);
  },

  methods: {
    getBookDetail () {
      console.log(this.$route.query._id);
      let url = `book-sources?view=summary&book=${this.$route.query._id}`;
      this.axios({
        method: 'get',
        url,
      }).then((res) => {
        console.log(res);
        this.bookChapter = res.data;
        console.log(this.bookChapter);

      })
      console.log(this.bookChapter);


    }
  },

  watch: {}

}

</script>
<style  scoped lang="less">
.bookDetail {
  .top {
    width: 100%;
    height: 46px;
    background-color: #b83320;
    display: flex;
    span {
      &:nth-child(1) {
        flex: 0 0 7%;
        text-align: center;
        line-height: 46px;
        color: #fff;
        font-size: 18px;
      }
      &:nth-child(2) {
        flex: 0 0 10%;
        line-height: 46px;
        color: #fff;
        font-size: 16px;
      }
      &:nth-child(3) {
        flex: 0 0 67%;
        line-height: 46px;
        text-align: center;
        color: #fff;
        font-size: 16px;
      }
      &:nth-child(4) {
        flex: 0 0 8%;
        line-height: 46px;
        color: #fff;
        font-size: 24px;
      }
      &:nth-child(5) {
        flex: 0 0 8%;
        line-height: 46px;
        color: #fff;
        font-size: 24px;
      }
    }
  }
}
</style>
